<%@ page pageEncoding="UTF-8" contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html >
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>NetCTOSS</title>
        <link type="text/css" rel="stylesheet" media="all" href="../styles/global.css" />
        <link type="text/css" rel="stylesheet" media="all" href="../styles/global_color.css" />
        <script language="javascript" type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
        <script language="javascript" type="text/javascript">
        	//定义一个异步请求的方法
        	function check_name(){
        		//获取输入框的值
        		var cost_name = $("#cost_name").val();
        		//做一个非空验证，如果输入为空，则结束方法
        		if(!cost_name){
        			$("#name_msg").text("资费名不能为空").addClass("error_msg");
        			return;
        		}
        		
        		//发送异步请求
        		$.post(
        			//请求地址
        			"checkCostName",
        			//参数
        			{"name":cost_name},
        			//成功回调函数
        			function(info){		//{"success":true,"message":"有效的资费名称!"}
        				//成功回调函数会将从后台获取到的json字符串自动解析成js对象
        				//做判断
        				if(info.success){
        					$("#name_msg").text(info.message).removeClass("error_msg");
        				}else{
        					$("#name_msg").text(info.message).addClass("error_msg");
        				}
        				
        			}
        		);
        		
        	}
        
            //保存结果的提示
            function showResult() {
                showResultDiv(true);
                window.setTimeout("showResultDiv(false);", 3000);
            }
            function showResultDiv(flag) {
                var divResult = document.getElementById("save_result_info");
                if (flag)
                    divResult.style.display = "block";
                else
                    divResult.style.display = "none";
            }

            function feeTypeChange(type){
            	var inputArray = document.getElementById("main").getElementsByTagName("input");
            	if(type == 1 ){
            		inputArray[4].readonly = true;
            		inputArray[4].value = "";
            		inputArray[4].className += " readonly";
            		inputArray[5].readonly = false;
            		inputArray[5].className = "width100";
            		inputArray[6].readonly = true;
            		inputArray[6].className += " readonly";
            		inputArray[6].value = "";
            	}else if(type == 2){
            		inputArray[4].readonly = false;
            		inputArray[4].className = "width100";
            		inputArray[5].readonly = false;
            		inputArray[5].className = "width100";
            		inputArray[6].readonly = false;
            		inputArray[6].className = "width100";
            	}else if(type == 3){
            		inputArray[4].readonly = false;
            		inputArray[4].value = "";
            		inputArray[4].className += " readyonly";
            		inputArray[5].readonly = true;
            		inputArray[5].value = "";
            		inputArray[5].className += " readyonly";
            		inputArray[6].readonly = false;
            		inputArray[6].className = "width100";
            	}
            }
            
        </script>
    </head>
    <body>
        <!--Logo、导航区域开始-->
    	<div id="header">
            <img src="../images/logo.png" alt="logo" class="left"/>
            <a href="#">[退出]</a>            
        </div>
        <!--Logo区域结束-->
        <!--导航区域开始-->
        <div id="navi">
            <ul id="menu">
                <li><a href="../index.html" class="index_off"></a></li>
                <li><a href="../role/role_list.html" class="role_off"></a></li>
                <li><a href="../admin/admin_list.html" class="admin_off"></a></li>
                <li><a href="../fee/fee_list.html" class="fee_on"></a></li>
                <li><a href="../account/account_list.html" class="account_off"></a></li>
                <li><a href="../service/service_list.html" class="service_off"></a></li>
                <li><a href="../bill/bill_list.html" class="bill_off"></a></li>
                <li><a href="../report/report_list.html" class="report_off"></a></li>
                <li><a href="../user/user_info.html" class="information_off"></a></li>
                <li><a href="../user/user_modi_pwd.html" class="password_off"></a></li>
            </ul>
        </div>
   		<!--Logo、导航区域结束-->
        <!--主要区域开始-->
        <div id="main">            
            <div id="save_result_info" class="save_fail">保存失败，资费名称重复！</div>
            <form action="" method="" class="main_form">
                <div class="text_info clearfix"><span>资费名称：</span></div>
                <div class="input_info">
                    <input type="text" class="width300" id="cost_name" onblur="check_name();"/>
                    <span class="required">*</span>
                    <div class="validate_msg_short" id="name_msg">50长度的字母、数字、汉字和下划线的组合</div>
                </div>
                <div class="text_info clearfix"><span>资费类型：</span></div>
                <div class="input_info fee_type">
                    <input type="radio" name="radFeeType" id="monthly" onclick="feeTypeChange(1);" />
                    <label for="monthly">包月</label>
                    <input type="radio" name="radFeeType" checked="checked" id="package" onclick="feeTypeChange(2);" />
                    <label for="package">套餐</label>
                    <input type="radio" name="radFeeType" id="timeBased" onclick="feeTypeChange(3);" />
                    <label for="timeBased">计时</label>
                </div>
                <div class="text_info clearfix"><span>基本时长：</span></div>
                <div class="input_info">
                    <input type="text" value="" class="width100" />
                    <span class="info">小时</span>
                    <span class="required">*</span>
                    <div class="validate_msg_long">1-600之间的整数</div>
                </div>
                <div class="text_info clearfix"><span>基本费用：</span></div>
                <div class="input_info">
                    <input type="text" value="" class="width100" />
                    <span class="info">元</span>
                    <span class="required">*</span>
                    <div class="validate_msg_long error_msg">0-99999.99之间的数值</div>
                </div>
                <div class="text_info clearfix"><span>单位费用：</span></div>
                <div class="input_info">
                    <input type="text" value="" class="width100" />
                    <span class="info">元/小时</span>
                    <span class="required">*</span>
                    <div class="validate_msg_long error_msg">0-99999.99之间的数值</div>
                </div>
                <div class="text_info clearfix"><span>资费说明：</span></div>
                <div class="input_info_high">
                    <textarea class="width300 height70"></textarea>
                    <div class="validate_msg_short error_msg">100长度的字母、数字、汉字和下划线的组合</div>
                </div>                    
                <div class="button_info clearfix">
                    <input type="button" value="保存" class="btn_save"  onclick="showResult();" />
                    <input type="button" value="取消" class="btn_save" />
                </div>
            </form>  
        </div>
        <!--主要区域结束-->
        <div id="footer">
            <span>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</span>
            <br />
            <span>版权所有(C)华育国际IT培训集团公司 </span>
        </div>
    </body>
</html>
